<template>
	<view class="paihangBang">
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles text-rule"></text> {{title}}
				</view>
				<view class="action more" v-if="showMore" @tap="goPage(url)">
					<text>更多热门</text><text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="">
				<view class="top-box" v-for="(item,index) in topList" :key="index" @tap="goTopPage(item.id)">
					<text v-if='showNum'>{{index + 1}}</text>{{item.title}}
				</view>
			</view>
			<view class="load-more">
				<text v-if="showMoreBotton">{{moreText}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "paiHangBang",
		props: {
			title: {
				type: String,
				default () {
					return '';
				}
			},
			showMoreBotton: {
				type: Boolean,
				default () {
					return true;
				}
			},
			showMore: {
				type: Boolean,
				default () {
					return false;
				}
			},
			url: {
				type: String,
				default () {
					return '';
				}
			},
			showNum: {
				type: Boolean,
				default () {
					return false;
				}
			},
			topList: {
				type: Array,
				default () {
					return [];
				},
				require: true
			}
		},
		data() {
			return {
				moreText: '加载更多'
			}
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			goTopPage(id) {
				uni.navigateTo({
					url: '/pages/topic/topicdetail?id=' + id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paihangBang {}
</style>
